<template>
    <!-- 透传--默认是：透传的样式属性是直接添加到最外层的标签上的。如果想直接作用到内部的某个标签上，就先禁止默认透传, 再使用 $attrs  -->
    <div>
        out wenzi
        <span class="yanse" v-bind="$attrs">this is good day!!</span>
    </div>
    <!-- 插槽 -->
    <div>
        插槽:
        <slot name="aa"></slot>
        <slot name="bb" title="jakechan" age="909"></slot>
        <slot name="cc" :city="cityName"></slot>
    </div>
    <!-- 孙组件 -->
    <p>依赖注入：爷爷组件提供数据 provide，孙子组件接收数据 inject ; 如果要点击孙子组件里面-按钮修改 传递的值，请在爷爷组件中定义方法</p>
    <ChildD></ChildD>
</template>
<script setup>
import ChildD from './ChildD.vue'
import { defineOptions, useAttrs , ref , onUpdated} from 'vue'
// 透传
defineOptions({ inheritAttrs: false })   // 先禁止默认透传  再使用 $attrs
const attrs = useAttrs()        // js中访问到透传过来的所有属性值
console.log('attrs-id',attrs.id , 'attrs-style', attrs.style);   // 这里会获取最新值。
onUpdated(()=>{
    console.log('attrs-id',attrs.id , 'attrs-style', attrs.style);    // 这里是获取被父组件动态修改以后传递过来的最新值
})
// slot
const cityName = ref('shanghai')


</script>
<style lang='scss' scoped>
.yanse {
    color: pink;
}
</style>